<!-- 设备管理 新 -->
<template>
    <div class="mainContent">
        <div class="mainContentLeft" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
            <div class="selectValue">
                <label class="value">
                    <span class="img">
                        <img src="@/assets/images/other/build.png" />
                    </span>
                    <span class="title">建筑信息</span>
                </label>
            </div>
            <div class="btnList">
                <custom-button type="add" @addClick="addClick" style="margin-right: 10px"></custom-button>
                <custom-button type="edit" @editClick="editClick" style="margin-right: 10px"></custom-button>
                <custom-button type="delete" @deleteClick="deleteClick" title="删除"></custom-button>
            </div>

            <div class="treeContent">
                <el-input placeholder="输入关键字搜索" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>

                <div class="treeMain">
                    <el-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        :default-expanded-keys="[1, 4, 9, 99]"
                        :default-checked-keys="[999]"
                        :props="defaultProps"
                    >
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="mainContentRight" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
            <div class="selectValue" style="margin: 0 0 10px 0">
                <label class="value">
                    <span class="img">
                        <img src="@/assets/images/other/room.png" />
                    </span>
                    <span class="title">房间信息</span>
                </label>
            </div>
            <div class="searchContent">
                <div class="searchContentLeft">
                    <custom-button type="add" title="新增" style="margin-right: 10px" @addClick="addRoom"></custom-button>
                    <custom-button type="pledit" title="修改" style="margin-right: 10px" @pleditClick="updateRoom"></custom-button>
                    <custom-button type="delete" title="删除" style="margin-right: 10px" @deleteClick="deleteRoom"></custom-button>
                    <custom-button type="pledit" title="修改身份策略" style="margin-right: 10px" @pleditClick="updateCard"></custom-button>
                    <custom-button
                        type="pledit"
                        title="修改仪表信息"
                        style="margin-right: 10px"
                        @pleditClick="updateMonitor"
                    ></custom-button>
                </div>
                <div class="searchContentRight">
                    <el-input
                        v-model="unitName"
                        placeholder="请输入房间名称"
                        size="mini"
                        style="width: 150px; margin-right: 10px"
                    ></el-input>
                    <custom-button type="search" style="margin-right: 10px" @searchClick="searchClick"></custom-button>
                    <custom-button type="reset" @resetClick="resetClick"></custom-button>
                </div>
            </div>
            <div class="gjw-list">
                <el-table
                    ref="multipleTable"
                    :data="dataSource"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange"
                    height="calc(100vh - 260px)"
                >
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column prop="roomName" label="房间名称"> </el-table-column>
                    <el-table-column prop="accountStatus" label="账号状态"> </el-table-column>
                    <el-table-column prop="roomNo" label="房间编号"> </el-table-column>
                    <el-table-column prop="roomPersonNum" label="房间人数"> </el-table-column>
                    <el-table-column prop="roomArea" label="房屋面积"> </el-table-column>
                    <el-table-column prop="personName" label="业主姓名"> </el-table-column>
                    <el-table-column prop="tel" label="联系电话"> </el-table-column>
                    <el-table-column prop="cardName" label="身份策略"> </el-table-column>
                    <el-table-column prop="planName" label="定价方案"> </el-table-column>
                    <el-table-column prop="isRelation" label="是否关联表"> </el-table-column>
                    <el-table-column prop="bh" label="表号" width="120">
                        <template slot-scope="scope">{{ scope.row.bh }}</template>
                    </el-table-column>
                    <el-table-column prop="type" label="仪表类型" width="120">
                        <template slot-scope="scope">{{ scope.row.type }}</template>
                    </el-table-column>
                    <el-table-column prop="wangguan" label="网关号" width="120">
                        <template slot-scope="scope">{{ scope.row.wangguan }}</template>
                    </el-table-column>
                </el-table>
                <div class="gjw-list-page">
                    <el-pagination
                        background
                        :layout="hasIsSizes ? 'prev, pager, next,total,sizes' : 'prev, pager, next,total'"
                        :total="count"
                        :page-size="size"
                        :current-page="current"
                        @current-change="pageChange"
                        :page-sizes="[20, 50, 100, 200, 500]"
                        @size-change="handleSizeChange"
                    >
                        >
                    </el-pagination>
                </div>
            </div>
        </div>

        <div v-if="dialogShow" style="text-align: left">
            <custom-dialog :title="dialogTitle" size="large" @dialogClose="dialogTableClose">
                <jianzhuForm @close="dialogShow = false" :formData="jianZhuForm"></jianzhuForm>
            </custom-dialog>
        </div>

        <div v-if="showAddRoom" style="text-align: left">
            <custom-dialog title="新增房间" size="small" @dialogClose="showAddRoom = false">
                <AddRoom @close="dialogShow = false"></AddRoom>
            </custom-dialog>
        </div>

        <div v-if="showCeLue" style="text-align: left">
            <UpdateCeLue @close="showCeLue = false"></UpdateCeLue>
        </div>

        <div v-if="showYbInfo" style="text-align: left">
            <custom-dialog title="批量修改仪表信息" size="small" @dialogClose="showYbInfo = false">
                <UpdateYiBiao @close="showYbInfo = false"></UpdateYiBiao>
            </custom-dialog>
        </div>

        <arrowLeft @arrowChange="arrowChange"></arrowLeft>
    </div>
</template>

<script>
import customButton from '@/components/customComponents/customForm/customButton'
import {CardList, configTableList} from '@/mockData/controlCenter'
import {roomManageForm} from '@/assets/form/managementCenter/systemManage/roomManage'
import customDialog from '@/components/customComponents/customDialog'
import {PopupCommon} from '@/libs/popupCommon'
import {LeftTree} from '@/mockData/monitorCenter.js'
import {RoomList, JianZhuList} from '@/mockData/systemManage.js'
import jianzhuForm from '../../systemManage/institutionalUnitManagement/components/jianzhuForm'
import AddRoom from '../institutionalUnitManagement/components/addRoom.vue'
import UpdateCeLue from '../institutionalUnitManagement/components/updateCeLue.vue'
import UpdateYiBiao from '../institutionalUnitManagement/components/updateYiBiao.vue'
import arrowLeft from '@/components/customComponents/arrowLeft'
export default {
    name: 'schemeConfiguration',
    components: {customButton, jianzhuForm, customDialog, AddRoom, UpdateCeLue, UpdateYiBiao, arrowLeft},
    data() {
        return {
            dir: 'left',
            showYbInfo: false,
            showCeLue: false,
            showAddRoom: false,
            jianZhuForm: {},
            secondTableHeight: document.body.clientHeight - 200,
            jianZhuName: '',
            customTitle: '无',
            activeName: 'first',
            input3: '',
            unitName: '',
            data: LeftTree,
            dialogShow: false,
            tableType: 'add',
            dialogTitle: '新增建筑',
            listItem: CardList,
            cardId: '',
            tableData: configTableList,
            formTableConfig: roomManageForm,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableColumns: [
                {
                    prop: 'parentName',
                    label: '上级建筑'
                },
                {
                    prop: 'name',
                    label: '建筑名称'
                },
                {
                    prop: 'no',
                    label: '建筑编号'
                },
                {
                    prop: 'area',
                    label: '建筑面积'
                },
                {
                    prop: 'shanghu',
                    label: '支付商户'
                },
                {
                    prop: 'system',
                    label: '所属系统'
                },
                {
                    prop: 'remark',
                    label: '描述'
                }
            ],
            // table 相关参数  begin
            dataSource: RoomList,
            currentPage: 'index',
            hasIsSizes: true,
            count: RoomList.length,
            size: 20,
            current: 1,
            // table 相关参数  end
            selectRoomList: [],
            jianzhuList: JianZhuList
        }
    },
    computed: {},
    created() {},
    methods: {
        arrowChange(e) {
            this.dir = e
        },
        // 新增房间
        addRoom() {
            this.showAddRoom = true
        },
        // 批量修改房间
        updateRoom() {},
        // 批量删除房间
        deleteRoom() {
            if (this.selectRoomList.length == 0) {
                PopupCommon.message('info', '请选择至少一个房间')
                return
            }

            PopupCommon.confirm('此操作将删除该数据, 是否继续?')
                .then(() => {
                    // const data = {
                    //     index: i,
                    //     data: d[i]
                    // }
                    // this.$emit("deleteRow", data)
                    PopupCommon.message('success', '删除成功')
                })
                .catch(() => {
                    // 这里尽量写下，否则会报警告异常。
                    console.log('已取消删除')
                })
        },
        updateCard() {
            this.showCeLue = true
        },
        updateMonitor() {
            this.showYbInfo = true
        },
        searchClick() {},
        resetClick() {
            this.input3 = ''
        },
        exportXls() {
            // let title = "出组期其他检查配置"
            // AjaxCommonExcelDownload("/ccdc/cfg/expOutOtherCheck/exportXls?title=" + title).then(
            //     (response) => {
            //         const blob = new Blob([response.data], {
            //             type: "application/vnd.ms-excel"
            //         })
            //         const link = document.createElement("a")
            //         link.href = window.URL.createObjectURL(blob)
            //         link.download = title + ".xls"
            //         link.click()
            //     },
            //     (error) => {
            //         console.log(error.message)
            //     }
            // )
        },
        handleClick(tab, event) {
            console.log(tab, event)
        },
        handleSelectionChange(d) {
            this.selectRoomList = d
        },
        formInputChange(e) {
            console.log(e)
        },
        tableSubmit(d) {
            if (d.id) {
                var item = this.listItem
                item.find((t) => t.id == d.id).name = d.name
                item.find((t) => t.id == d.id).remark = d.remark
                this.listItem = item
                this.cardId = ''
                PopupCommon.message('success', '修改成功')
            } else {
                d.id = Math.random() * 100000
                this.listItem.push(d)
                PopupCommon.message('success', '新增成功')
            }
            this.dialogShow = false
        },
        dialogTableClose() {
            this.dialogShow = false
        },
        // 分页点击事件
        pageChange(p) {
            // this.current = p
            // this.initPage()
            console.log(p)
        },
        // 页码点击事件,p当前页
        handleSizeChange(e) {
            this.size = e
            this.current = 1
            // this.initPage()
        },
        editRow(d) {
            this.type = 'edit'
            console.log(d)
            // let formConfigItem = this.formConfig
            // formConfigItem.map((t) => {
            //     Object.keys(t).map((res) => {
            //         if (res == "fieldName") {
            //             t.filedValue = d.data[t[res]]
            //         }
            //     })
            // })
            // this.formConfig = formConfigItem
            // this.dialogShow = true
            // this.dialogTitle = "编辑" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
        },
        viewRow(d) {
            this.type = 'look'
            console.log(d)
            // let formConfigItem = this.formConfig
            // formConfigItem.map((t) => {
            //     Object.keys(t).map((res) => {
            //         if (res == "fieldName") {
            //             t.filedValue = d.data[t[res]]
            //         }
            //     })
            // })
            // this.formConfig = formConfigItem
            // this.dialogShow = true
            // this.dialogTitle = "查看" + JSON.parse(SessionCommon.getCurrentMenuInfo()).title
        },
        deleteRow(d) {
            const id = d.data.id
            console.log(id)
            // let self = this
            // AjaxCommon("/ccdc/cfg/device/device/delete?id=" + id, "delete", {
            //     optReason: d.optReason
            // }).then((res) => {
            //     console.log(res, "res...............")
            //     if (res.data.code == 200) {
            //         PopupCommon.notify("success", "删除成功")
            //         self.initPage()
            //         self.dialogClose()
            //     } else {
            //         PopupCommon.notify("error", res.data.message)
            //     }
            // })
        },
        getCardClass(item) {
            return item.id == this.cardId ? 'item hover' : 'item'
        },
        cardClick(e) {
            this.cardId = e.id
        },
        deleteClick() {
            if (this.cardId == '') {
                PopupCommon.message('info', '请选择建筑')
                return
            }
            // var self = this
            // var item = this.listItem.find((t) => t.id == this.cardId)
            // var itemIndex = this.listItem.findIndex((t) => t.id == this.cardId)
            PopupCommon.confirm(`确定删除？`).then(() => {
                // self.listItem.splice(itemIndex, 1)
                // self.cardId = ""
                PopupCommon.message('success', '删除成功')
            })
        },
        editClick() {
            // 赋值
            this.jianZhuForm = {}
            this.dialogShow = true
            this.dialogTitle = '编辑建筑'
        },
        addClick() {
            this.jianZhuForm = {}
            this.dialogShow = true
            this.dialogTitle = '新增建筑'
        }
    }
}
</script>

<style lang="scss" scoped>
.mainContent {
    position: relative;
    .left {
        left: 285px !important;
    }
    .leftArrow {
        width: 300px !important;
    }
    .rightArrow {
        width: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }
    .leftTable {
        max-width: calc(100% - 320px);
    }
    .rightTable {
        max-width: calc(100% - 0px);
    }
    .searchContent {
        display: flex;
        .searchContentLeft {
            text-align: left;
            width: 500px;
        }
        .searchContentRight {
            text-align: right;
            flex: 1;
        }
    }
    .btnList {
        text-align: left;
        padding-left: 8px;
    }
    .selectValue {
        display: flex;
        height: 40px;
        background: rgba(58, 95, 116, 0.6);
        margin: 0 8px 10px 8px;
        border-radius: 4px;
        line-height: 40px;
        color: #fff;
        font-size: 16px;
    }
    .selectValue .value {
        margin-left: 5px;
        font-size: 16px;

        .img {
            display: block;
            float: left;
            margin-top: 4px;
            width: 32px;
            height: 32px;
        }
        .title {
            color: #fff;
            margin-left: 5px;
        }
    }
    background-color: #fff;
    height: calc(100vh - 100px);
    margin: 10px 0;
    width: 100%;
    display: flex;
    .gjw-list {
        margin: 10px 0;
    }
    .gjw-list-page {
        margin-top: 10px;
        text-align: right;
        float: right;
    }
    .mainContentLeft {
        width: 250px;
        height: 100%;
        padding: 10px 0;
        border-right: 1px solid #ebeef5;
        .treeContent {
            margin-right: 5px;
            height: calc(100vh - 210px);
            width: 285px;
            margin-left: 8px;
            margin-top: 10px;
        }
        .treeMain {
            height: calc(100vh - 175px);
            overflow-y: auto;
            margin-top: 10px;
        }
        .card {
            color: #2680fa;
            font-size: 16px;
            height: 30px;
            line-height: 30px;
            background-color: #d8e8ff;
            width: 234px;
            margin-left: 8px;
            margin-top: 15px;
            position: relative;
            margin-bottom: 10px;
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 6px;
                height: 100%;
                content: '';
                background-color: #2680fa;
            }
        }
        .list {
            text-align: center;
            width: 234px;
            margin-left: 8px;
            height: calc(100vh - 200px);
            overflow: auto;
            .item {
                color: #333;
                height: 35px;
                line-height: 35px;
                cursor: pointer;
                &:hover {
                    background-color: #d8e8ff;
                }
            }
            .hover {
                background-color: #d8e8ff;
            }
        }
    }
    .mainContentRight {
        flex: 1;
        height: 100%;
        padding: 10px;
        .bold {
            font-size: 14px;
            font-weight: bold;
        }
        .itemContent {
            width: 25%;
            float: left;
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            label {
                color: #888;
            }
            span {
                color: #333;
            }
        }
        .a {
            color: #418ffb;
            text-decoration: none;
        }
    }
}
</style>
